import React, { Component } from 'react'
import { CSSTransition } from 'react-transition-group'

const animate = (WrappedComp) => {
  return class extends Component {
    

    render() {
      // console.log(this.props)
      // this.props.match 最关键的开关

      // let enterActive = ""
      // let exitActive = ''

      // let state = this.props.location.state
      // let { match, meta } = this.props
      // let from = state && state.from
      // if(!!match) {
      //   if( from < meta ) {
      //     enterActive = 'animate__slideInRight'
      //     exitActive = 'animate__slideOutLeft'
      //   } else {
      //     enterActive = 'animate__slideOutLeft'
      //     exitActive = 'animate__slideInRight'
      //   }
      // }

      /*let pathname = this.props.location.pathname
      // console.log(pathname)

      return (
        <CSSTransition
          in={!!this.props.match}
          timeout={3000}
          classNames={{
            enter: "animate__animated",
            enterActive: pathname === '/list'? "animate__slideInRight" : "animate__slideInLeft",
            // enterActive: "animate__slideInRight",
            exit: "animate__animated",
            exitActive: pathname === '/list'? "animate__slideOutLeft" : "animate__slideOutRight"
            // exitActive: "animate__slideOutLeft"
          }}
          mountOnEnter={true}
          unmountOnExit={true}
        >
          <WrappedComp {...this.props}></WrappedComp>
        </CSSTransition>
      )*/

      let { match } = this.props
      let pathname = this.props.location.pathname
      // console.log(pathname)
      let enterActive = ""
      let exitActive = ""      
      const SIR = 'animate__slideInRight'
      const SOL = 'animate__slideOutLeft'
      const SIL = 'animate__slideInLeft'
      const SOR = 'animate__slideOutRight'

      let state = this.props.location.state

      let from = state && state.from

      // console.log('from-pathname', from, pathname)

      switch(true) {
        case from === '/home': 
        case from === '/list' && pathname === '/detail': 
          enterActive = SIR
          exitActive = SOL
          break;
        case from === '/list' && pathname === '/home': 
        case from === '/detail' && pathname === '/home': 
        case from === '/detail' && pathname === '/list': 
          enterActive = SIL
          exitActive = SOR
          break;
        default: 
          enterActive = SIR
          exitActive = SOL
          break;
      }
      return (
        <CSSTransition
          in={!!match}
          timeout={1000}
          classNames={{
            enter: "animate__animated",
            enterActive,
            exit: "animate__animated",
            exitActive
          }}
          mountOnEnter={true}
          unmountOnExit={true}
        >
          <WrappedComp {...this.props}></WrappedComp>
        </CSSTransition>
      )
    }
  }
}

export default animate